<template>
	<div class="app-container">
		<div class="policyupper3c">
			<div class="p-detail">
				<p>
					<i class="iconfont icon-baoxianchanpin now"></i>&nbsp;&nbsp; {{info.batchName}}
					<span class="add" v-if='info.isReward'>奖励</span>&nbsp;
					<span v-show="spanShow">
					<span class="add1" v-if="info.state==0">编辑中</span>&nbsp;
					<span class="add2" v-if="info.state==3">生效中</span>&nbsp;
					<span class="add3" v-if="info.state==4">已过期</span>&nbsp;
					<span class="add4" v-if="info.state==1">待审批</span>&nbsp;
					<span class="add5" v-if="info.state==5">已驳回</span>&nbsp;
					<span class="add6" v-if="info.state==2">待生效</span>
					</span>
				</p>
				<div class="d-box">
					<p>
						<span>保险公司：</span>
						<span class="d-setc">{{info.insuranceName}}</span>&nbsp;&nbsp;
						<span>有效日期：</span>
						<span class="d-setc">{{info.effectiveDate}} 到 </span>
						<span class="d-setc" v-if="info.expiryDate != ''">{{info.expiryDate}}</span>
						<span class="d-setc" v-if="info.expiryDate == ''">不限</span>&nbsp;&nbsp;
						<span>匹配日期类型：</span>
						<span class="d-setc">{{info.matchDateType}}</span>&nbsp;&nbsp;
					</p>
					<p>
						<span>适用工号：</span>
						<span class="d-setc" v-for='item in info.staffNames'>
							<span class="d-setc isF">&nbsp;&nbsp;|&nbsp;&nbsp;</span>{{item.insuranceName}}-{{item.staffAccount}}({{item.describe}})</span>
					</p>
				</div>
			</div>
			<div class="p-list">
				<table class="util-table">
					<tr>
						<th rowspan="2" width="455">政策备注信息</th>
						<th rowspan="2" width="100">上/下游</th>
						<th colspan="2" width="200">交强险</th>
						<th colspan="2" width="200">商业险</th>
						<th rowspan="2" width="150">操作</th>
					</tr>
					<tr>
						<th width="100">佣金</th>
						<th width="100">奖励</th>
						<th width="100">佣金</th>
						<th width="100">奖励</th>
					</tr>
					<tr v-for='item in policylist'>
						<td>{{item.remarks}}</td>
						<td class="setc">
							<div>
								<span class="setr">上游</span>
								<span class="setg">下游（业务通用）</span>
								<span class="setg" v-for='i in item.extends' v-if='item.extends.length != 0'>
									<span v-if='i.extendTypes==0'>下游（{{i.count}}个政策级别）</span>
									<span v-if='i.extendTypes==1'>下游（{{i.count}}个组织）</span>
									<span v-if='i.extendTypes==2'>下游（{{i.count}}个用户）</span>
								</span>
							</div>
						</td>
						<td class="setc">
							<div>
								<span class="spanset">{{item.upperBrokerageTraffic}}%</span>
								<div class="setH">
									<span class="inputset">{{item.lowerBrokerageTraffic}}%</span>
								</div>
								<div class="setH" v-for='i in item.extends' v-if='item.extends.length != 0'>
									<span class="inputset">{{item.lowerBrokerageTraffic}}%</span>
								</div>
							</div>
						</td>
						<td class="setc">
							<div>
								<span class="spanset">{{item.upperRewardTraffic}}%</span>
								<div class="setH">
									<span class="inputset">{{item.lowerRewardTraffic}}%</span>
								</div>
								<div class="setH" v-for='i in item.extends' v-if='item.extends.length != 0'>
									<span class="inputset">{{item.lowerRewardTraffic}}%</span>
								</div>
							</div>
						</td>
						<td class="setc">
							<div>
								<span class="spanset">{{item.upperBrokerageBusiness}}%</span>
								<div class="setH">
									<span class="inputset">{{item.lowerBrokerageBusiness}}%</span>
								</div>
								<div class="setH" v-for='i in item.extends' v-if='item.extends.length != 0'>
									<span class="inputset">{{item.lowerBrokerageBusiness}}%</span>
								</div>
							</div>
						</td>
						<td class="setc">
							<div>
								<span class="spanset">{{item.upperRewardBusiness}}%</span>
								<div class="setH">
									<span class="inputset">{{item.lowerRewardBusiness}}%</span>
								</div>
								<div class="setH" v-for='i in item.extends' v-if='item.extends.length != 0'>
									<span class="inputset">{{item.lowerRewardBusiness}}%</span>
								</div>
							</div>
						</td>
						<td class="setc">
							<a @click='toDetail()'>查看详情</a>
						</td>
					</tr>
				</table>
			</div>
			<el-row class="elRow toDis-elrow" v-show="btbShow">
				<el-button type="primary" class="policyOkBtn" :style="policyOkBtnClass" @click="toApproval()" v-text="policyOkBtnHtml" :disabled="okDisabled"></el-button>
				<el-button class="policyTurnBtn" type="info" id="policyTurnBtn" :style="policyTurnBtnClass" @click="toDis()" v-text="policyTurnBtnHtml" :disabled="turnDisabled"></el-button>
			</el-row>
			
			<!--审核-->
			<el-dialog title="审核提示" :visible.sync="dialogTableVisible" width="500px" class="toDis-dialog" :close-on-click-modal="false">
			  <p class="dialog-tit">该批次的执行时间与以下批次的执行时间重复，点击审核通过后，该批次的开始时间将自动变成 {{info.batchName}} 的结束时间！</p>
			  <!--<div class="visi-wrp" v-for="(item,index) in list">-->
			  <div class="dialog-max"> 	
				  <div class="visi-wrp">
					<div class="visi-list2" v-for="item in list">
					  	<div><span class="grayTxt">批次名称：</span> {{item.batchName}} </div>
					  	<div><span class="grayTxt">保险公司：</span> {{item.insuranceName}}</div>
					  	<div v-for="item2 in item.staffNames"><span class="grayTxt">使用工号：</span> <span>{{item2}}</span></div>
					  	<div><span class="grayTxt">有效日期：</span> <span v-if="item.expiryDate!=null">{{item.effectiveDate}} 到 {{item.expiryDate}}</span><span v-if="item.expiryDate==null">{{item.effectiveDate}} 到 无限</span></div>
					  	<div><span class="grayTxt">匹配日期类型：</span> {{item.matchDateType}}</div>
					  	<div><span class="grayTxt">是否奖励批次：</span> <span v-if="item.isReward==0">否</span><span v-if="item.isReward==0">是</span></div>
					</div>					
				  </div>
			  </div>  
			  <div slot="footer" class="dialog-footer dialog-fooer-btnwp">
			    <el-button class="detail-sureBtn" @click="toEdit(id)">去修改</el-button>
			    <el-button class="detail-sureBtn detail-sureBtn_right" type="primary" @click="toRoval_sure()">确 定</el-button>
			  </div>
			</el-dialog>
			
			
			<!--驳回-->
			<el-dialog title="驳回原因" :visible.sync="dialogDomVisible" width="690px" class="toDis-dialog2" :close-on-click-modal="false">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-form-item label="" prop="dismissalSeason">
				    		<el-input class="toDis-textarea" type="textarea" rows="12" placeholder="请输入驳回原因" v-model="ruleForm.dismissalSeason"></el-input>
				    	</el-form-item>
				    </el-row>
				  	<el-form-item class="dialog-sec-wp">
				    	<el-button type="primary" class="toDis-toRoval-btn" @click="toDis_sure('ruleForm')">确 定</el-button>
				  	</el-form-item>
				</el-form>
			</el-dialog>
		</div>
	</div>
</template>
<script>
import Vue from "vue";
import nextnav from "../assembly/nextnav";
export default {
  data() {
    return {
      id: null, //当前id
      policylist: [],
      info: {},
      navnum: 2,
      
      policyOkBtnHtml:'通过',
		okDisabled:false,
		
		turnDisabled:false,
		policyTurnBtnHtml:'驳回',
		btbShow:true,
		spanShow:true,
		//审核
		dialogTableVisible:false,
		list:[],
		//驳回
		dialogDomVisible:false,
		ruleForm:{
			dismissalSeason:null
		},
		rules:{dismissalSeason:[{ required: true, message: '请输入驳回原因', trigger: 'blur' }]}
    };
  },
  mounted() {
  	if (this.$route.query.page==false) {
		this.btbShow=false;
		this.spanShow=true;
	} else{
		this.btbShow=true;
		this.spanShow=false;
	}
  	
    console.log(this.$route.query.batchId);
    if (this.$route.query.batchId) {
      this.id = this.$route.query.batchId;
      this.getBasic();
      this.getPolicyList();
    }
    // this.getBasic();
    // this.getPolicyList();
  },
  components: {
    nextnav
  },
  methods: {
    //信息
    getBasic() {
      let params = {
        // 'id':'AFE5BBB3-9E30-46D2-9166-03316C65092D'
        id: this.id
      };
      this.post(params, "services/app/policy/GetPolicyBatchBasic").then(rs => {
        if (rs.success) {
          console.log("success");
          console.log(rs.result);
          this.info = rs.result;
        }
      });
    },
    //信息表
    getPolicyList() {
      let params = {
        // 'id':'AFE5BBB3-9E30-46D2-9166-03316C65092D'
        id: this.id
      };
//    this.post(params, "services/app/policy/GetAllPolicyList").then(rs => {
//      if (rs.success) {
//        console.log(rs.result.items);
//        this.policylist = rs.result.items;
//      }
//    });
      
      //获取冲突批次列表
		this.post(params, "services/app/policy/CheckEffectivedPolicyBatch").then(res => {
			this.list = res.result.items;
			console.log('su2')
			console.log(res)
			var oldId = '';
			this.list.forEach(item => {
              oldId += item.policyBatchId + ',';					  
            });
            var  OldID = (oldId .substring(oldId .length - 1) == ',') ? oldId .substring(0, oldId .length - 1) : oldId ;
            this.oldPolicyBatchId = OldID;
            console.log(this.oldPolicyBatchId)
		});
    },
    
    
    //点击通过按钮
	toApproval(){
		if(this.list.length==0){
        	var txt = '确定审核通过吗？'	            	
	        this.$confirm(txt, '审核提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          closeOnClickModal:false
	        }).then(() => {
	          this.toRovalPost();
	          	
	        }).catch();
		      
		    return false;
        }
		//如果有冲突批次
        this.dialogTableVisible=true;
	},
	//确定通过（冲突批次弹框上的确认按钮
	toRoval_sure(){
		this.dialogTableVisible=false;
		let params={
         	newPolicyBatchId:this.batchId,
         	oldPolicyBatchId:this.oldPolicyBatchId
        };
		this.post(params,'services/app/policy/UpdateExpiryDate').then(re=>{
			if (re.success) {
				this.toRovalPost();
			}
		})
		
	},
	//去修改（冲突批次弹框上的确认按钮
	toEdit(batchId){
		this.$router.push({
            name: 'policyupper1',
            params: {
              id: batchId
            }
        });
	},		
	//提交审核post
	toRovalPost(){
		let params={
			policyBatchId:this.id
		}
      	this.post(params,'services/app/policy/UpdatePolicyBatchStateToApproval').then(re=>{
          	if(re.success){
	          this.add1Show=false;
	          this.add4Show=true;
	          this.add5Show=false;
	          this.policyOkBtnClass.cursor='default';
              this.policyOkBtnHtml='已通过';
              this.turnDisabled=true;
              this.okDisabled=true;
              
          	}
      	});
	},
	
    
    
    
    
    
    //驳回
	toDis(){
		this.dialogDomVisible=true;	        
	},
	toDis_sure(formName){
		this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
				policyBatchId:this.id,
				dismissalSeason:this.ruleForm.dismissalSeason
			}
			this.post(params,'services/app/policy/UpdatePolicyBatchStateToDismissal').then(res=>{
				if (res.success) {
					this.$notify({
                     title: '成功',
                     message: '已驳回',
                     type: 'success'
                    });
                    this.dialogDomVisible=false;
                    this.add1Show=false;
                    this.add4Show=false;
                    this.add5Show=true;
              
                    this.policyTurnBtnHtml='已驳回';
                    this.turnDisabled=true;
                    this.okDisabled=true;
				}
			})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
	},
    //详情
    toDetail() {
      this.$router.push({
        name: "policyupnewdd",
        query: {
          batchId: this.id
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.wd100 {
  width: 100px;
  height: 32px;
}
.setH {
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #e8e8e8;
}
.setH:last-child {
  border-bottom: 0;
}
.app-container {
  .policyupper3c {
    padding: 0 68px 0 68px;
    .p-detail {
      margin-top: 50px;
      p {
        font-size: 18px;
        color: #333;
        margin: 20px 0;
        .now {
          color: #ee6000;
          font-size: 18px;
        }
        .add {
          font-size: 12px;
          color: #fff;
          background: #ff9430;
          border-radius: 8px;
          padding: 0 5px;
          line-height: 18px;
          display: inline-block;
          text-align: center;
          margin-left: 10px;
        }
        .add1,
        .add2,
        .add3,
        .add4,
        .add5,
        .add6 {
          border-radius: 3px;
          padding: 4px 7px;
          font-size: 12px;
          color: #fff;
        }
        .add1 {
          background: #027dca;
        }
        .add2 {
          background: #389e0d;
        }
        .add3 {
          background: #666666;
        }
        .add4 {
          background: #ff7819;
        }
        .add5 {
          background: #cf1322;
        }
        .add6 {
          background: #389e0d;
        }
      }
      .d-box {
        background: #eaf5fb;
        //width: 100%;
        height: 79px;
        padding: 15px 30px;
        p {
          margin: 0;
          span {
            font-size: 12px;
            color: #95bacc;
          }
          .d-setc {
            color: #2e94c5;
          }
          .isF:first-child {
            display: none;
          }
        }
        p:nth-of-type(1) {
          margin-bottom: 10px;
        }
      }
    }
    .p-list {
      //width:100%;
      margin-bottom: 20px;
      .util-table {
        //width:100%;
        height: 80px;
        border: 0;
        //border-bottom:1px solid #e8e8e8;
        border-collapse: collapse;
        tr {
          th {
            background: #334750;
            color: #fff;
            border: 0;
            text-align: center;
          }
          td {
            //padding:10px 0;
            font-size: 14px;
            border-bottom: double #e8e8e8;
            .inputset {
              //background:#e8e8e8;
              //border:1px solid #c3c1c1;
              border: 0;
              width: 45px;
              height: 21px;
              text-align: right;
              color: #333333;
              font-size: 12px;
              //padding:3px;
            }
            span {
              font-size: 13px;
            }
            .setred {
              border: 1px solid #ff0000;
            }
            a {
              color: #027dca;
              font-size: 13px;
            }
            .addN {
              font-size: 14px;
              color: #027dca;
              cursor: pointer;
            }
          }
          .setc {
            text-align: center;
            padding: 0;
            .spanset {
              display: block;
              line-height: 40px;
              height: 40px;
              text-align: center;
              color: #333333;
              border-bottom: 1px solid #e8e8e8;
            }
            .setg {
              color: #019f6c;
              font-size: 12px;
              line-height: 40px;
              height: 40px;
              min-width: 100px;
              display: block;
              border-bottom: 1px solid #e8e8e8;
              span {
                color: #019f6c;
                font-size: 12px;
              }
            }
            .setg:last-child {
              border-bottom: 0;
            }
            .setr {
              color: #ff0000;
              font-size: 12px;
              line-height: 40px;
              height: 40px;
              display: block;
              border-bottom: 1px solid #e8e8e8;
            }
          }
        }
      }
    }
  }
  .toDis-elrow{text-align: center;padding-top: 25px;}
	.policyOkBtn,.policyTurnBtn{width: 140px;height: 32px;line-height: 32px;padding: 0;}
	.policyTurnBtn{margin-left: 30px;}
}
.dialog-max{width: 100%;height: 260px;overflow-y: auto;border: 1px solid #e4e4e4;}
.visi-wrp{padding: 6px 0;box-sizing: border-box;width: 90%;margin: 0 auto;font-size: 14px;}
	/*.elRow{width: 1005px;text-align: center;margin-top: 50px;margin-bottom: 30px;}*/
	.toDis-dialog .el-dialog__body{border-top: 1px solid #bcbcbc;padding-top: 0;padding-bottom: 0;padding-left: 14px;padding-right: 14px;height: 380px;}
	.toDis-dialog2 .el-dialog__body{padding: 15px 20px;}
	.dialog-fooer-btnwp{text-align: center;padding: 10px 0;}
	.detail-sureBtn{display: inline-block;width: 140px;}
	.detail-sureBtn_right{margin-left: 30px;}
	
	.visi-list2{font-size: 12px;}
	.grayTxt{display: inline-block;width: 90px;text-align: right;color: #aeaeae;}
	.toDis-toRoval-btn{width: 140px;}
	.dialog-sec-wp{text-align: center;padding-top: 10px;padding-bottom: 0;}
</style>
<style type="text/css">
	.toDis-dialog .el-dialog__header,.toDis-dialog2 .el-dialog__header{border-bottom: 1px solid #BCBCBC;}
	.toDis-dialog .el-dialog__body{padding: 7px 50px;}
	.toDis-dialog2 .el-dialog__body{padding: 15px 20px;}
	.toDis-dialog .el-dialog__title{font-size: 14px;color: #333333;}
	.toDis-dialog .el-form-item__content{margin-left: 0 !important;padding:0 15px;}
	.toDis-dialog .el-dialog{width: 680px !important;}
	.toDis-dialog2 .el-form-item__content{margin-left: 0 !important;}
	.toDis-dialog2 .el-row{margin: 0 !important;}
	.toDis-dialog2 .el-textarea__inner{border: 1px solid #BCBCBC;border-radius: 0;}
</style>